<template>
  <div class="dispatch-add-forms">
    <div class="dispatch-add-title">
      <div class="dispatch-add-icon"></div>
      <div class="dispatch-add-titles">预警措施</div>
    </div>
    <div class="dispatch-add-center">
      <div class="dispatch-add-csfk">
        <div class="dispatch-add-yjcsfk">预警措施反馈</div>
        <div class="dispatch-add-yjcsnr">
          <div class="dispatch-add-nr">调控中心2021年8月11日上午收到省公司下发的预警措施，计划2021年8月11日13点15分对110kV梅林变电站调整电网运行方式，防止发生系统性崩溃和解列，保证主网安全，接受上级调度机构领导，做好跨区电网调度工作。及时汇总并向公司专项应急办和上级调度机构汇报事件情况。</div>
        </div>
      </div>
      <div class="dispatch-add-csls">
        <div class="dispatch-add-yjcsls">
          <div class="dispatch-add-yjcsl">
            <div class="dispatch-add-icon"></div>
            <div class="dispatch-add-titles">预警措施</div>
          </div>
          <div class="dispatch-add-yjcsls">
            <el-button size="mini" type="text" icon="el-icon-full-screen" class="dispatch-add-icons" @click="showImage"></el-button>
            <div class="dispatch-add-titless">全屏</div>
          </div>
        </div>
        <div class="dispatch-add-tpk">
          <img class="dispatch-add-tp" :src="img" />
        </div>
      </div>
    </div>
    <div id="web_bg" v-show="isShow">
      <div class="white margin5-10" style="float: right; cursor: pointer" @click="hideImage">
        关闭
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Dispatch",
  components: {},
  data() {
    return {
      isShow: false,
      img: require("../../../../assets/img/ddcs.png")
    };
  },
  mounted: {},
  methods: {
    showImage() {
      this.isShow = true;
    },
    hideImage() {
      this.isShow = false;
    }
  }
};
</script>

<style scoped lang="less">
.dispatch-add-forms {
  width: 100%;
  height: 88%;
  .dispatch-add-title {
    width: 98%;
    height: 8%;
    display: flex;
    margin-top: 10px;
    margin-left: 30px;
    .dispatch-add-icon {
      width: 4px;
      height: 18px;
      background-color: rgba(53, 97, 253, 1);
    }
    .dispatch-add-titles {
      width: 8%;
      height: 18px;
      text-align: center;
      line-height: 18px;
      font-size: 14px;
      // background-color: antiquewhite;
    }
  }
  .dispatch-add-center {
    width: 98%;
    height: 80%;
    margin: 20px auto;
    border: 1px solid rgba(215, 215, 215, 1);
    border-radius: 2px;
    font-size: 14px;
    display: flex;
    .dispatch-add-csfk {
      width: 50%;
      height: 98%;
      .dispatch-add-yjcsfk {
        width: 100%;
        height: 10%;
        text-indent: 50px;
        line-height: 30px;
      }
      .dispatch-add-yjcsnr {
        width: 90%;
        height: 90%;
        margin: 0 auto;
        font-size: 15px;
        background-color: rgba(215, 215, 215, 0.298039215686275);
        border-radius: 5px;
        .dispatch-add-nr {
          letter-spacing: 1px;
          width: 95%;
          height: 95%;
          margin: 0 auto;
          padding-top: 8px;
          text-indent: 20px;
          line-height: 25px;
        }
      }
    }
    .dispatch-add-csls {
      width: 50%;
      height: 98%;
      .dispatch-add-yjcsls {
        width: 100%;
        height: 10%;
        // margin-top: 1%;
        display: flex;
        .dispatch-add-yjcsl {
          width: 50%;
          height: 10%;
          // margin-top: 1%;
          display: flex;
          .dispatch-add-icon {
            width: 4px;
            height: 18px;
            margin-left: 10%;
            margin-top: 10px;
            background-color: rgba(53, 97, 253, 1);
          }
          .dispatch-add-titles {
            width: 30%;
            height: 18px;
            text-align: center;
            line-height: 18px;
            font-size: 14px;
            margin-top: 10px;
            // background-color: antiquewhite;
          }
        }
        .dispatch-add-yjcsls {
          width: 50%;
          height: 10%;
          // margin-top: 1%;
          display: flex;
          .dispatch-add-icons {
            font-size: 18px;
            margin-left: 60%;
            margin-top: 5px;
            color: #999999;
          }
          .dispatch-add-titless {
            width: 15%;
            height: 24px;
            text-align: center;
            line-height: 24px;
            font-size: 14px;
            margin-top: 11px;
            color: #999999;
          }
        }
      }
      .dispatch-add-tpk {
        width: 90%;
        height: 90%;
        margin: 0 auto;
        background-color: rgba(215, 215, 215, 0.298039215686275);
        border-radius: 5px;
        .dispatch-add-tp {
          display: block;
          width: 95%;
          height: 95%;
          margin: 0 auto;
          padding-top: 5px;
          padding-bottom: 5px;
        }
      }
    }
  }
}
#web_bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  zoom: 1;
  background-image: url('../../../../assets/img/ddcs.png');
  background-color: rgba(0, 0, 0, 0.9);
  background-repeat: no-repeat;
  background-position: center center;
}
</style>
